<template>
    <div class="drawer_container">
        <div v-if="drawerType === 'grid'">
            <div class="drawer_title">画布背景设置</div>
            <div class="drawer_wrap">
                <el-form label-position="left" label-width="85">
                    <el-form-item label="是否显示网格" label-width="100">
                        <el-switch v-model="showGrid" @change="isShowGrid" />
                    </el-form-item>
                    <el-row v-show="showGrid">
                        <el-form-item label="网格类型">
                            <el-radio-group v-model="grid.type" @change="changeGridType">
                                <el-radio v-for="item in gridTypeList" :label="item.value" :key="item.value">{{item.label}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="网格大小">
                            <el-slider style="margin-left:85px" v-model="grid.size" :min="0" :max="30" @change="changeGrid"></el-slider>
                        </el-form-item>
                        <el-form-item label="网格颜色">
                            <el-color-picker v-model="grid.args.color" @change="changeGrid"/>
                        </el-form-item>
                        <el-form-item label="网格线宽度">
                            <el-slider style="margin-left:85px" v-model="grid.args.thickness" :min="0" :max="20" @change="changeGrid"></el-slider>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div v-if="drawerType === 'node'">
            <div class="drawer_title">节点设置</div>
            <div class="drawer_wrap">
                <el-form label-position="left" label-width="80">
                    <el-form-item label="节点文本">
                        <el-input v-model="drawerNode.nodeText" @change="changeNodeText"></el-input>
                    </el-form-item>
                    <el-form-item label="节点背景">
                        <el-color-picker v-model="drawerNode.fill" @change="changeFill"/>
                    </el-form-item>
                    <el-form-item label="字体大小">
                        <el-slider style="margin-left:80px" v-model="drawerNode.fontSize" :min="10" :max="20" @change="changefontSize"></el-slider>
                    </el-form-item>
                    <el-form-item label="字体颜色">
                         <el-color-picker v-model="drawerNode.fontFill" @change="changeFontFill"/>
                    </el-form-item>
                    <el-form-item label="边框宽度">
                        <el-slider style="margin-left:80px" v-model="drawerNode.strokeWidth" :min="0" :max="10" @change="changeStrokeWidth"></el-slider>
                    </el-form-item>
                    <el-form-item label="边框颜色">
                        <el-color-picker v-model="drawerNode.stroke" @change="changeStroke"/>
                    </el-form-item>
                    <el-form-item label="功能">
                        <el-Button type="primary" icon="md-trending-up" @click="toTopZIndex">置顶</el-Button>
                        <el-Button type="error" class="margin-left-10" icon="md-trash" @click="deleteNode">删除</el-Button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-if="drawerType === 'edge'">
            <div class="drawer_title">线条设置</div>
            <div class="drawer_wrap">
                <el-form label-position="left" label-width="80">
                    <el-form-item label="线条文本">
                        <el-input v-model="drawerEdge.EdgeText" @change="changeEdgeText"></el-input>
                    </el-form-item>
                    <el-form-item label="线条宽度">
                        <el-slider style="margin-left:80px" v-model="drawerEdge.edgeWidth" :min="1" :max="10" @change="changeEdgeWidth"></el-slider>
                    </el-form-item>
                    <el-form-item label="线条颜色">
                        <el-color-picker v-model="drawerEdge.edgeColor" @change="changeEdgeColor"/>
                    </el-form-item>
                    <el-form-item label="功能">
                        <el-Button type="primary" icon="md-trending-up" @click="toTopZIndex">置顶</el-Button>
                        <el-Button type="error" class="margin-left-10" icon="md-trash" @click="deleteNode">删除</el-Button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'RightDrawer',
    data() {
        return {
            gridTypeList:[
                {
                    label:'四边网格',
                    value:'mesh'
                },
                {
                    label:'点状网格',
                    value:'dot'
                }
            ],
            showGrid:true,
            drawerNode:{
                fill:'',
                nodeText:'',
                fontSize:null,
                fontFill:'',
                strokeWidth:null,
                stroke:''
            },
            drawerEdge:{
                EdgeText:'',
                edgeWidth:null,
                edgeColor:''
            },
        };
    },
    props:{
        drawerType: {
            type: String
        },
        selectCell:{
            type: String | Object
        },
        graph:{
            type: String | Object
        },
        grid:{
            type: Object
        }
    },
    created() {},
    mounted() {},
    watch:{
        selectCell:{
            handler(val) {
                if(val){
                    if(val.isNode()){  //节点
                        // 文字内容 节点背景色 字体大小 字体颜色 边框宽度 边框颜色
                        const newNode = val.store.data.attrs;
                        this.drawerNode.nodeText = newNode.label?newNode.label.text:newNode.title.text;
                        this.drawerNode.fill = newNode.body.fill?newNode.body.fill:'';
                        this.drawerNode.fontSize = newNode.label?Number(newNode.label.fontSize):Number(newNode.title.fontSize);
                        this.drawerNode.fontFill = newNode.label?newNode.label.fill:newNode.title.fill;
                        this.drawerNode.strokeWidth = newNode.body.strokeWidth?Number(newNode.body.strokeWidth):0;
                        this.drawerNode.stroke = newNode.stroke?newNode.stroke:'';
                    }else{ //边
                        this.drawerEdge.EdgeText = val.store.data.labels?val.store.data.labels[0].text:''
                        this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth)
                        this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke
                    }
                }
            },
            immediate: true,
            deep: false
        },
    },
    methods: {
        // 网格设置
        isShowGrid(){
            this.showGrid?this.graph.showGrid():this.graph.hideGrid()
        },
        changeGridType(e){
            this.grid.type = e
            this.changeGrid()
        },
        changeGrid(){
            this.graph.drawGrid({
                ...this.grid
            })
        },
        // 更改边框宽度
        changeStrokeWidth(val){
            this.selectCell.attr('body/strokeWidth', val)
        },
        // 更改文字大小
        changefontSize(val){
            if(this.selectCell.store.data.attrs.body.label) this.selectCell.attr('label/fontSize',val)
            else this.selectCell.attr('title/fontSize',val)
        },
        // 更改文字
        changeNodeText(){
            if(this.selectCell.store.data.attrs.body.label) this.selectCell.attr('label/text', this.drawerNode.nodeText)
            else this.selectCell.attr('title/text', this.drawerNode.nodeText)
        },
        // 更改边框颜色
        changeStroke(val){
            this.drawerNode.stroke = val
            this.selectCell.attr('body/stroke', this.drawerNode.stroke)
        },
        // 更改字体颜色
        changeFontFill(val){
            this.drawerNode.fontFill = val
            if(this.selectCell.store.data.attrs.body.label) {
                this.selectCell.attr('label/fill', this.drawerNode.fontFill)
            } else {
                this.selectCell.attr('title/fill', this.drawerNode.fontFill)
            }
        },
        // 更改节点背景
        changeFill(val){
            this.drawerNode.fill = val
            this.selectCell.attr('body/fill', val)
        },
        // 边设置
        changeEdgeText(){
            this.selectCell.setLabels( 
                [{attrs:{label:{text:this.drawerEdge.EdgeText}}}]
            )
        },
        changeEdgeWidth(val){
            this.drawerEdge.edgeWidth = val
            this.selectCell.attr('line/strokeWidth', this.drawerEdge.edgeWidth)
        },
        changeEdgeColor(val){
            this.drawerEdge.stroke = val
            this.selectCell.attr('line/stroke', this.drawerEdge.stroke)
        },
        // 置顶
        toTopZIndex(){
            this.selectCell.toFront()
        },
        // 删除
        deleteNode(){   
            this.$emit('deleteNode')
        },
    },
};
</script>

<style lang="less" scoped>
    .drawer_container {
        max-width: 300px;
        min-width: 300px;
        .drawer_title {
            border-bottom: 1px solid #e8eaec;
            box-sizing: border-box;
            padding: 14px 16px;
            color: #333;
            font-size: 16px;
        }
        .drawer_wrap {
            box-sizing: border-box;
            padding: 20px 10px 20px 20px;
            box-sizing: border-box;
        }
    }
</style>
